<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    1.什么是模块化? 从代码进行划分,让每个模块代码功能单一,方便维护.
    2.什么是组件化? 从ui角度进行划分,方便复用.
    3.创建组件的方式. 1.通过Vue.extend创建模板,然后vue.component("组件名称",Vue.extend({}))
    2.直接通过Vue.component("组件名称",{template:"<h3>123</h3>"})
    3.先创建模板,通过template标签,Vue.component("组件名称1",{template:"#id名"}).
    4:为什么组件的data不能是一个对象? 需要返回一个新的对象,开辟一个新的控件,保证组件数据的唯一性.
    5:首先在子组件中写入props:{},在子组件标签内书写属性,例如传一个name ,写入name="属性值",
    接收: props:{name:String}或者props:{name:{type:类型,default:默认值}};
    6:组件切换: component is属性来控制显示的组件,
    7:给组件切换添加动画. 通过<transition name="fade">
        <component :is="isShow?'login':'logon'"></component>
    </transition>
    css属性方式. .fade-enter,.fade-leave-to{定义出去和进来时的样式} .fade-enter-active,.fade-leave-active{transition:all 2s linear}
    mode="out-in" 先出在近, in-out 先进再出 appear 进入页面后加载一次动画.
    8:什么是插槽? 在子组件写入一个占位符,在引用组件标签内写入内容(文本,html,组件),内容会在占位符的位置.
    9:具名插槽: 首先给插槽定义一个名字 slot name="top-content" ,在填入内容时,添加<template v-slot:name名称></template>

    <component :is="'login'">
    </component>
    <div>
        <text name="今天天气不错"></text>
    </div>

    <!-- 组件1:login -->
    <!-- 组件2:comment -->
</body>

</html>